<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<style>
increaseFont, decreaseFont, resetFont {
	color:#CCCCCC;
	font-size:14px;
	float:left;
	margin:10px;
}

percentage {
	font-size:100%;
	margin-bottom:20px;
	padding:20px;
	background-color:#222222;
}

</style>
<script src="js/jquery-1.8.0.js"></script>
<script src="js/jquery.mobile-1.1.1.js"></script>
<script src="js/jqm-docs.js"></script>
<script src="js/aggricultureApp.js"></script>
<script> 
var weeds = ["weed1", "weed2","weed3", "weed4"];

function initialize(){
	console.log("page is onload");
	func.webdb.openDB();
	func.webdb.createTables();
	//func.server.requestData("crops");
}

function resetUserSelection(){
	console.log("resetting user selections");
	func.webdb.resetVariables();
}

var fromURL = null;
var dataOptions = null;

/////////////////////////////////////////////////////////////////////////////////
// The Query and Render function for crop list screen
/////////////////////////////////////////////////////////////////////////////////
// The function to conduct the crop list query
function dealWithCropQuery(tx, rs){
	console.log("query returning");
	func.webdb.queryResult = rs;
	showCropCategory(fromURL, dataOptions);
	console.log("query result is stored");	
}


// The function to render the crop list screen
function showCropCategory(urlObj, options)
{
	var fromName = urlObj.hash.replace(/.*from=/, "");
	console.log("from: " + fromName);
	var pageSelector = urlObj.hash.replace(/\?.*$/, "");
	var $page = $(pageSelector);
	
	//Make the content
	var listView = "<ul data-role='listview' data-inset='true' data-filter='true'>";
	var dataCount = func.webdb.queryResult.rows.length;
	console.log("data count is " + dataCount);
	for(var i = 0; i < dataCount; i++){
		var row = func.webdb.queryResult.rows.item(i);
		console.log("crop id is " + row.crop_name);
		listView += "<li> <a href='#selectStageCrop' onClick=\"func.webdb.setCropSelection("+ row.crop_id + ", '" + row.crop_name + "')\">" + row.crop_name + "</a></li>";
	}
	listView += "</ul>";
	console.log("list generated");
	var $content = $page.children(":jqmData(role=content)");
	$content.html(listView);
	console.log("list set");
	
	//Force rerendering the page
	$page.page();
	$content.find(":jqmData(role=listview)").listview();
	
	$.mobile.changePage($page, options);
}
////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////
// The query and render function for crop stage screen
////////////////////////////////////////////////////////////////////////////////////
function dealWithCropStageQuery(tx, rs){
	console.log("query returning");
	func.webdb.queryResult = rs;
	showCropStageCategory(fromURL, dataOptions);
	console.log("query result is stored");	
}

function showCropStageCategory(urlObj, options)
{
	var fromName = urlObj.hash.replace(/.*from=/, "");
	var pageSelector = urlObj.hash.replace(/\?.*$/, "");
	var $page = $(pageSelector);

	
	//Make the content
	var listView = "<ul data-role='listview' data-inset='true' data-filter='true'>";
	var dataCount = func.webdb.queryResult.rows.length;
	console.log("data count is " + dataCount);
	for(var i = 0; i < dataCount; i++){
		var row = func.webdb.queryResult.rows.item(i);
		console.log("stage name is " + row.stage_name);
		listView += "<li> <a href='#selectWeed' onClick=\"func.webdb.setCropStageSelection("+ row.stage_id +", '" + row.stage_name + "')\">" + row.stage_name + "</a></li>";
	}
	listView += "</ul>";
	console.log("list generated");
	var $content = $page.children(":jqmData(role=content)");
	$content.html(listView);
	console.log("list set");
	
	
	//Force rerendering the page
	$page.page();
	$content.find(":jqmData(role=listview)").listview();
	
	$.mobile.changePage($page, options);
}
////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////
// The query and render function for weeds category screen
////////////////////////////////////////////////////////////////////////////////////
function dealWithWeedQuery(tx, rs){
	console.log("query returning");
	func.webdb.queryResult = rs;
	showWeedCategory(fromURL, dataOptions);
	console.log("query result is stored");	
}

function showWeedCategory(urlObj, options)
{
	var fromName = urlObj.hash.replace(/.*from=/, "");
	var pageSelector = urlObj.hash.replace(/\?.*$/, "");
	var $page = $(pageSelector);

	
	//Make the content
	var listView = "<ul data-role='listview' data-inset='true' data-filter='true'>";
	var dataCount = func.webdb.queryResult.rows.length;
	console.log("data count is " + dataCount);
	for(var i = 0; i < dataCount; i++){
		var row = func.webdb.queryResult.rows.item(i);
		console.log("weed name is " + row.weed_name);
		listView += "<li> <a href='#selectStageWeed' onClick=\"func.webdb.setWeedSelection("+ row.weed_id + ",'" + row.weed_name + "')\">" + row.weed_name + "</a></li>";
	}
	listView += "</ul>";
	console.log("list generated");
	var $content = $page.children(":jqmData(role=content)");
	$content.html(listView);
	console.log("list set");
	
	//Force rerendering the page
	$page.page();
	$content.find(":jqmData(role=listview)").listview();
	
	$.mobile.changePage($page, options);
}
////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////
// The query and render function for weed stage screen
////////////////////////////////////////////////////////////////////////////////////
function dealWithWeedStageQuery(tx, rs){
	console.log("query returning");
	func.webdb.queryResult = rs;
	showWeedStageCategory(fromURL, dataOptions);
	console.log("query result is stored");	
}


function showWeedStageCategory(urlObj, options)
{
	var fromName = urlObj.hash.replace(/.*from=/, "");
	var pageSelector = urlObj.hash.replace(/\?.*$/, "");
	var $page = $(pageSelector);
	
	//Make the content
	var listView = "<ul data-role='listview' data-inset='true' data-filter='true'>";
	var dataCount = func.webdb.queryResult.rows.length;
	console.log("data count is " + dataCount);
	for(var i = 0; i < dataCount; i++){
		var row = func.webdb.queryResult.rows.item(i);
		console.log("stage name is " + row.stage_name);
		listView += "<li> <a href='#userSelectionSummary' onClick=\"func.webdb.setWeedStageSelection("+ row.stage_id + ",'" + row.stage_name + "')\">" + row.stage_name + "</a></li>";
	}
	listView += "</ul>";
	console.log("list generated");
	var $content = $page.children(":jqmData(role=content)");
	$content.html(listView);
	console.log("list set");
	
	//Force rerendering the page
	$page.page();
	$content.find(":jqmData(role=listview)").listview();
	
	$.mobile.changePage($page, options);
}
////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////
// The query and render function for herbicide screen
////////////////////////////////////////////////////////////////////////////////////
function dealWithHerbicideQuery(tx, rs){
	console.log("query returning");
	func.webdb.queryResult = rs;
	showHerbicideCategory(fromURL, dataOptions);
	console.log("query result is stored");	
}

function showHerbicideCategory(urlObj, options)
{
	var fromName = urlObj.hash.replace(/.*from=/, "");
	var pageSelector = urlObj.hash.replace(/\?.*$/, "");
	var $page = $(pageSelector);
	
	//Make the content
	var listView = "<ul data-role='listview' data-inset='true' >";
	var dataCount = func.webdb.queryResult.rows.length;
	console.log("data count is " + dataCount);
	for(var i = 0; i < dataCount; i++){
		var row = func.webdb.queryResult.rows.item(i);
		console.log("herb id is " + row.herb_id);
		listView += "<li> <a href='#selectProduct' onClick=\"func.webdb.setHerbicideSelection("+ row.herb_id + ",'" + row.herb_name + "')\">" + row.herb_name + "</a></li>";
	}
	listView += "</ul>";
	console.log("list generated");
	
	var userSelectionLabel = "<label>Crop: "+ func.webdb.selectedCrop_name + 
	"\nCrop stage: " + func.webdb.selectedCropStage_name + 
	"\nWeed: " + func.webdb.selectedWeed_name +
	"\nWeed stage: " + func.webdb.selectedWeedStage_name + " </label>";
	
	var $content = $page.children(":jqmData(role=content)");
	$content.html(userSelectionLabel + listView);
	console.log("list set");
	
	//Force rerendering the page
	$page.page();
	$content.find(":jqmData(role=listview)").listview();
	
	$.mobile.changePage($page, options);
}
////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////
// The query and render function for product screen
////////////////////////////////////////////////////////////////////////////////////
function dealWithProductQuery(tx, rs){
	console.log("query returning");
	func.webdb.queryResult = rs;
	showProductCategory(fromURL, dataOptions);
	console.log("query result is stored");	
}

function showProductCategory(urlObj, options)
{
	var fromName = urlObj.hash.replace(/.*from=/, "");
	var pageSelector = urlObj.hash.replace(/\?.*$/, "");
	var $page = $(pageSelector);
	
	
	//Make the content
	var listView = "<ul data-role='listview' data-inset='true' data-filter='true'>";
	var dataCount = func.webdb.queryResult.rows.length;
	console.log("data count is " + dataCount);
	for(var i = 0; i < dataCount; i++){
		var row = func.webdb.queryResult.rows.item(i);
		console.log("herb id is " + row.product_id);
		listView += "<li> <a href='#productInfo' onClick=\"func.webdb.setProductSelection("+ i + ",'" + row.product_name + "', "+ row.product_id+ ")\">" + row.product_name + "</a></li>";
	}
	listView += "</ul>";
	console.log("list generated");

	var $content = $page.children(":jqmData(role=content)");
	$content.html(listView);
	console.log("list set");
	
	//Force rerendering the page
	$page.page();
	$content.find(":jqmData(role=listview)").listview();
	
	$.mobile.changePage($page, options);
}
////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////
// The query and render function for product screen
////////////////////////////////////////////////////////////////////////////////////

function showProductInfo(urlObj, options)
{
	var fromName = urlObj.hash.replace(/.*from=/, "");
	var pageSelector = urlObj.hash.replace(/\?.*$/, "");
	var $page = $(pageSelector);
	
	//Make the content
	var listView = "<label>";
	listView += "<li>Name: " + func.webdb.selectedProduct_name + "</li>";
	listView += "<li>Company: " + func.webdb.selectedProduct_company + "</li>";
	listView += "<li>Ingredients: " + func.webdb.selectedProduct_ingredients + "</li>";
	listView += "<li>Other Info: " + func.webdb.selectedProduct_info + "</li>";
	//if(func.webdbqueryResult.rows.item(0).rate != 'undefined'){
	  listView += "<li>Rate: " + func.webdb.queryResult.rows.item(0).rate + "</li>";
	//}
	listView += "</label>";

	var $content = $page.children(":jqmData(role=content)");
	$content.html(listView);
	console.log("list set");
	
	//Force rerendering the page
	$page.page();
	$content.find(":jqmData(role=listview)").listview();
	
	$.mobile.changePage($page, options);
}
////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////
// The query and render function for product screen
////////////////////////////////////////////////////////////////////////////////////
function dealWithProductRecommandationQuery(tx, rs){
	func.webdb.queryResult = rs;
	showProductInfo(fromURL, dataOptions);
}

function showProductRecommandation(urlObj, options)
{
	var fromName = urlObj.hash.replace(/.*from=/, "");
	var pageSelector = urlObj.hash.replace(/\?.*$/, "");
	var $page = $(pageSelector);
	
	//Make the content
	var listView = "<label>";
	listView += "<li>Name: " + func.webdb.selectedProduct_name + "</li>";
	listView += "<li>Company: " + func.webdb.selectedProduct_company + "</li>";
	listView += "<li>Ingredients: " + func.webdb.selectedProduct_ingredients + "</li>";
	listView += "<li>Other Info: " + func.webdb.selectedProduct_info + "</li>";
	listView += "<li>Rate: " + func.webdb.queryResult.rows.item(0).rate + "</li>";
	listView += "</label>";

	var $content = $page.children(":jqmData(role=content)");
	$content.html(listView);
	console.log("list set");
	
	//Force rerendering the page
	$page.page();
	$content.find(":jqmData(role=listview)").listview();
	
	$.mobile.changePage($page, options);
}
////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////
// The query and render function for product screen
////////////////////////////////////////////////////////////////////////////////////

function showUserSelection(urlObj, options)
{
	var fromName = urlObj.hash.replace(/.*from=/, "");
	var pageSelector = urlObj.hash.replace(/\?.*$/, "");
	var $page = $(pageSelector);
	
	//Make the content
	var listView = "<label>";
	listView += "<li>Crop Name: " + func.webdb.selectedCrop_name + "</li>";
	listView += "<li>Stage: " + func.webdb.selectedCropStage_name + "</li>";
	listView += "</label>";
	
	listView += "<legend>Selected Weeds:</legend>";
	for(var i = 0; i < func.webdb.weedCart_id.length; i++){
	  listView += "<input type=\"checkbox\""+ " checked ='" + func.webdb.weedCart_checked[i] +"' name="+ i +" id=\"checkbox-"+ i +"\" class=\"custom\" " +"/>";
	  listView += "<label id='"+ i +"' for=\"checkbox-"+ i +"\"> " + func.webdb.weedCart_name[i] + " at " + func.webdb.weedCart_stage_name[i] + "</label>";
	}


	var $content = $page.children(":jqmData(role=content)");
	$("#weedCheckboxes").html(listView);
	console.log("list set");
	
	//Force rerendering the page
	$page.page();
	
	for(var i = 0; i < func.webdb.weedCart_id.length; i++){
	  var $checkbox = $content.find("input[id='checkbox-"+ i + "']");
	  if(func.webdb.weedCart_checked[i])$checkbox.attr('checked', 'checked');
	  else $checkbox.removeAttr('checked');
	  $checkbox.click(function(){func.webdb.setWeedCartCheck($(this).attr("name"), $(this).is(':checked'))});
	  $checkbox.checkboxradio();
	}
	$.mobile.changePage($page, options);
	
}

function deleteWeeds(){
	
	for(var i = 0; i < func.webdb.weedCart_id.length; i++){
		if(func.webdb.weedCart_checked[i]){
		    var $checkbox = $("#weedCheckboxes").find("input[id='checkbox-"+ i + "']");
		    $("#weedCheckboxes").find("label[id='" + i + "']").remove();
		    $checkbox.remove();
		}
	}
	
	for(var i = 0; i < func.webdb.weedCart_id.length; i++){
		if(func.webdb.weedCart_checked[i]){
			func.webdb.removeWeed(i);
			console.log("weeds "+ i + " removed");
			i--;
		}
	}
		
}
////////////////////////////////////////////////////////////////////////////////////

function doQuery(str, dealWithQuery)
{
	var db = func.webdb.db;
	if(db != null) {
		console.log("query starting");
		console.log("the query is " + str);
		db.transaction(function(tx){
		tx.executeSql(str,[], 
				           dealWithQuery, func.webdb.onError);
		});
		console.log("query conducted\n");
	}	
}


// Listen for any attempts to call changePage().
$(document).bind( "pagebeforechange", function( e, data ) {
	// We only want to handle changePage() calls where the caller is
	// asking us to load a page by URL.
	if ( typeof data.toPage === "string" ) {
		// We are being asked to load a page by URL, but we only
		// want to handle URLs that request the data for a specific
		// category.
		
		var u = $.mobile.path.parseUrl( data.toPage );
		fromURL = u;
		dataOptions = data.options;
		
		if ( u.hash.search(/^#selectCrop/) != -1 ) {
			// We're being asked to display the items for a specific category.
			// Call our internal method that builds the content for the category
			// on the fly based on our in-memory category data structure.
			//alert("page change event fired\n");
			console.log("page change event fired\n");
			doQuery("SELECT * FROM crops", dealWithCropQuery);
			//func.server.requestData("crops");

			// Make sure to tell changePage() we've handled this call so it doesn't
			// have to do anything.
			e.preventDefault();
		} 
		
		else if( u.hash.search(/^#selectStageCrop/) != -1){
		    console.log("go to select crop stage screen");
			doQuery("SELECT * FROM crops_stage", dealWithCropStageQuery);
			
			e.preventDefault();
		}
		
		else if( u.hash.search(/^#selectWeed/) != -1){
			doQuery("SELECT * FROM weeds", dealWithWeedQuery);
			
			e.preventDefault();
		}
		
		else if(u.hash.search(/^#selectStageWeed/) != -1){
			doQuery("SELECT * FROM weeds_stage", dealWithWeedStageQuery);
			
			e.preventDefault();
		}
		
		else if(u.hash.search(/^#selectHerbicide/) != -1){
			//showHerbicideCategory(fromURL, dataOptions);
			
			var cropQuery =" (SELECT herb_id FROM products WHERE product_id IN (SELECT prod_id FROM crop_product WHERE"
				+" crop_id = " + func.webdb.selectedCrop_id 
				+" AND cr_stid_min <= " + func.webdb.selectedCropStage_id
				+" AND cr_stid_max >= " + func.webdb.selectedCropStage_id
				+" ))";
			var theQuery = cropQuery;
			for(var i = 0; i < func.webdb.weedCart_id.length; i++){
				if(func.webdb.weedCart_checked[i]){
				  theQuery = " (SELECT herb_id FROM weed_herbicide WHERE" 
					  +" weed_id = "+ func.webdb.weedCart_id[i] 
					  +" AND w_stid_min <= "+ func.webdb.weedCart_stage_id[i]
					  +" AND w_stid_max >= "+ func.webdb.weedCart_stage_id[i]
					  +" AND herb_id IN " + theQuery + ")";
				}
			}
			
			theQuery = "SELECT * FROM herbicide WHERE herb_id IN " + theQuery;
			console.log("The query is: " + theQuery);
			
			doQuery(theQuery
					, dealWithHerbicideQuery);
			
			
			e.preventDefault();
		}
		
		else if(u.hash.search(/^#selectAllHerbicides/) != -1){
			doQuery("SELECT * FROM herbicide", dealWithHerbicideQuery);
			e.preventDefault();
		}
		else if(u.hash.search(/^#selectProduct/) != -1){
			doQuery("SELECT * FROM products WHERE herb_id = " + func.webdb.selectedHerbicide_id , dealWithProductQuery);
			
			e.preventDefault();
		}
		else if(u.hash.search(/^#selectAllProducts/) != -1){
            doQuery("SELECT * FROM products", dealWithProductQuery);
			
			e.preventDefault();
		}
		else if(u.hash.search(/^#productInfo/) != -1){
			doQuery("SELECT rate FROM crop_product WHERE crop_id = " + func.webdb.selectedCrop_id + " AND prod_id = " + func.webdb.selectedProduct_id, dealWithProductRecommandationQuery);
			
			e.preventDefault();
		}
		else if(u.hash.search(/^#userSelectionSummary/) != -1){
			showUserSelection(fromURL, dataOptions);
			
			e.preventDefault();
		}
		else if(u.hash.search(/^#start/) != -1){
			resetUserSelection();
		}
	}
});

$(document).ready(function(){
	  // Reset Font Size
	  var originalFontSize = $('html').css('font-size');
	  $(".resetFont").click(function(){
	  $('.ui-btn-text').css('font-size', originalFontSize);
	  });
	  // Increase Font Size
	  $(".increaseFont").click(function(){
	  	var currentFontSize = $('html').css('font-size');
	 	var currentFontSizeNum = parseFloat(currentFontSize, 10);
	    var newFontSize = currentFontSizeNum*1.2;
		$('.ui-btn-text').css('font-size', newFontSize);
		return false;
	  });
	  // Decrease Font Size
	  $(".decreaseFont").click(function(){
	  	var currentFontSize = $('.ui-btn-text').css('font-size');
	 	var currentFontSizeNum = parseFloat(currentFontSize, 10);
	    var newFontSize = currentFontSizeNum*0.8;
		$('.ui-btn-text').css('font-size', newFontSize);
		return false;
	  });
});

</script>
</head>

<body onload="initialize()">


<!-- ************************************************************************** -->
<!-- Starting Page -->

<div data-role="page" id="start" data-theme="a" .ui-page>

	<div data-role="header" data-theme="a">  
		<h1> Mobi Crop 0.61 </h1>
	</div>
    
	<div data-role="content">
	  <div class="ui-grid-b">
	    <div class="ui-block-a">
        
        	<a href="#browse" data-role="button" data-transition="none" style="color:#0C0"> 
            	<img src="images/basic/address.ico"> <br> browse 
            </a>
            
        </div>
	    
        <div class="ui-block-b"> 
        	<a href="#help" data-role="button" data-transition="none" style="color:#0C0"> 
            	<img src="images/basic/help.ico"> <br> help 
            </a>
        </div>
	   
        <div class="ui-block-c">
        
        	<a href="#config" data-role="button" data-transition="none" style="color:#0C0"> 
            	<img src="images/basic/settings.ico"> <br> config 
            </a>
            
        </div>
       
	    <div class="ui-block-a"> </div>
        
	    <div class="ui-block-b"> 
         	<a href="#selectCrop" data-role="button" data-transition="none" style="color:#0C0"> 
            	<img src="images/basic/play.ico"> <br> Start 
            </a>
        </div>
	    
        <div class="ui-block-c"> </div>
        
	    <div class="ui-block-a">
        	<a href="#licence" data-role="button" data-transition="none" style="color:#0C0"> 
            	<img src="images/basic/licence.ico"> <br> sources 
            </a>
        </div>
	    
        <div class="ui-block-b"> 
        	<a href="#warning" data-role="button" data-transition="none" style="color:#0C0"> 
            	<img src="images/basic/warning.ico"> <br> warning 
            </a>
        </div>
	    
        <div class="ui-block-c">
        	<a href="#team" data-role="button" data-transition="none" style="color:#0C0"> 
            	<img src="images/basic/user-anonymous.ico"> <br> team 
            </a>
        </div>
        
      </div>  
	</div>
</div>

<!-- ************************************************************************** -->
<!-- Browse -->

<div data-role="page" id="browse" data-theme="a">
	<div data-role="header">
		<h1   style="font-size:20px" > Browse Products </h1>
        <a href="#start" data-icon="home" class="ui-btn-left" data-transition="none" style="font-size:20px"> Home </a>
		
	</div>
    
	<div data-role="content">	
      <ul data-role="listview" data-inset="true" data-filter="true">
        <li><a href="#selectAllHerbicides">Browse Active Ingredients</a></li>
        <li><a href="#selectAllProducts">Browse Products</a></li>
      </ul>
	</div>
    
	<div data-role="footer" data-position="fixed">
    	<h1>         </h1>
		<a href="#start" data-icon="arrow-l" class="ui-btn-left" data-transition="none" data-inline="true"> Back </a>
       
	</div>
</div>

<!-- ************************************************************************** -->
<!-- Help -->

<div data-role="page" id="help" data-theme="a">
	<div data-role="header">
		<h1   style="font-size:20px" > Help </h1>
        <a href="#start" data-icon="home" class="ui-btn-left" data-transition="none" style="font-size:20px"> Home </a>
		
	</div>
    
	<div data-role="content">	
		Help 	
	</div>
    
    
	<div data-role="footer" data-position="fixed">
    	<h1>         </h1>
		<a href="#start" data-icon="arrow-l" class="ui-btn-left" data-transition="none" data-inline="true"> Back </a>
       
	</div>
</div>

<!-- ************************************************************************** -->
<!-- Config -->

<div data-role="page" id="config" data-theme="a">
	<div data-role="header">
		<h1   style="font-size:20px" > Configuration </h1>
        <a href="#start" data-icon="home" class="ui-btn-left" data-transition="none" style="font-size:20px"> Home </a>
		
	</div>
    
	<div data-role="content">	
		<a href="#" class="increaseFont">Increase Font</a>
        <a href="#" class="decreaseFont">Decrease Font</a>
	</div>
    
    
	<div data-role="footer" data-position="fixed">
    	<h1>         </h1>
		<a href="#start" data-icon="arrow-l" class="ui-btn-left" data-transition="none" data-inline="true"> Back </a>
       
	</div>
</div>

<!-- ************************************************************************** -->
<!-- Licence -->

<div data-role="page" id="licence" data-theme="a">
	<div data-role="header">
		<h1   style="font-size:20px" > Data Sources </h1>
        <a href="#start" data-icon="home" class="ui-btn-left" data-transition="none" style="font-size:20px"> Home </a>
		
	</div>
    
	<div data-role="content">	
		This application uses data from the 2011 Guide to CROP PROTECTION (Saskatchewan)	
	</div>
    
    
	<div data-role="footer" data-position="fixed">
    	<h1>         </h1>
		<a href="#start" data-icon="arrow-l" class="ui-btn-left" data-transition="none" data-inline="true"> Back </a>
       
	</div>
</div>

<!-- ************************************************************************** -->
<!-- Warning -->

<div data-role="page" id="warning" data-theme="a">
	<div data-role="header">
		<h1   style="font-size:20px" > Warning </h1>
        <a href="#start" data-icon="home" class="ui-btn-left" data-transition="none" style="font-size:20px"> Home </a>
		
	</div>
    
	<div data-role="content">	
    <center>
		<H1 style="color:red"> 
        
        Demo application - DO NOT USE !!!
        
        <hr>
        <BR>
        <BR>
        This application is only a guide.
Always refer to the product label for
application details and precautions.
</center>
</H1>

	
	</div>
    
    
	<div data-role="footer" data-position="fixed" >
    	<h1>         </h1>
		<a href="#start" data-icon="arrow-l" class="ui-btn-left" data-transition="none" data-inline="true"> Back </a>
       
	</div>
</div>

<!-- ************************************************************************** -->
<!-- Team -->

<div data-role="page" id="team" data-theme="a">
	<div data-role="header">
		<h1   style="font-size:20px" > Team </h1>
        <a href="#start" data-icon="home" class="ui-btn-left" data-transition="none" style="font-size:20px"> Home </a>
		
	</div>
    
	<div data-role="content">	
		
    
    <fieldset  >
		<div class="ui-block-a">
    
    	<img src="images/people/tomWolf.jpg"  >
    	
    	</div>
	<div class="ui-block-b"> 
    	<ul> Wolf, Tom, Ph.D. <b><i>Research Scientist</i></b>
<li> 
<p>107 Science Place<br />
 Agriculture and Agri-Food Canada (AAFC) <br/>
Saskatoon, Saskatchewan S7N 0X2<br />
Telephone: 306-956-7635<br />
Fax: 306-956-2072<br />
Email: <a href="mailto:tom.wolf@agr.gc.ca" title="Email: Wolf, Tom, Ph.D.">tom.wolf@agr.gc.ca</a><br />
        
        
        </div>	   
</fieldset>
    <BR> <BR>
      <fieldset  >
		<div class="ui-block-a">
    
    	<img src="images/people/Ralph.jpg" width="100">
    	
     	</div>
		<div class="ui-block-b"> 
    	<ul> Deters, Ralph, Ph.D. <b><i>Faculty</i></b>
		<li> 
		<p>110 Science Place<br />
		Department of Computer Science <br>
		Saskatoon, Saskatchewan S7N 5C9<br />
		Telephone: 306-956-7635<br />
		Fax: 306-956-7247<br />
		Email: <a href="mailto:deters@cs.usask.ca" title="Email: Deters, Ralph, Ph.D.">deters@cs.usask.ca</a><br />
        
        
   	 	</div>	   
	</fieldset>  
      	
	</div>
    
    
	<div data-role="footer" data-position="fixed" >
    	<h1>         </h1>
		<a href="#start" data-icon="arrow-l" class="ui-btn-left" data-transition="none" data-inline="true"> Back </a>
       
	</div>
</div>


<!-- ************************************************************************** -->



<!----------------- Select Crop Page -------------------------------->
<div data-role="page" id="selectCrop"   data-add-back-btn="true" class="percentage">
  <div data-role="header">
    <h1>Select Crop</h1>
  </div>
  <div data-role="content">
    <ul data-role="listview" data-inset="true" data-filter="true">
      <li><a href="#page3">Barley</a></li>
      <li><a href="#page3">Oats</a></li>
      <li><a href="#page3">Triticale</a></li>
      <li><a href="#page3">Durum Wheat</a></li>
    </ul>
  </div>
  <div data-role="footer" data-position="fixed">
      <a href="#start" data-role="button" data-icon="arrow-u">Home</a>
  </div>
</div>
<!-- ---------------------------------------------------------------->

<!-- Select Crop Stage Page ----------------------------------------->
<div data-role="page" id="selectStageCrop"  data-add-back-btn="true">
  <div data-role="header">
    <h1>Select Crop Stage</h1>
  </div>
  <div data-role="content">
    <ul data-role = "listview">
      <li data-role="list-divider">Germination</li>
      <li><a href="#page4">Dry seed(00)</a></li>
      <li><a href="#page4">Imbibition Complete(03)</a></li>
      <li><a href="#page4">Radicle emarged from caryopsis(05)</a></li>
      <li><a href="#page4">Coleoptile emerged from seed(07)</a></li>
      <li><a href="#page4">Leap just at coleoptile tip(09)</a></li>
      <li data-role = "list-divider">Seedling Growth</li>
      <li><a href="#page4">First leaf through Coleoptile(10)</a></li>
      <li><a href="#page4">First leaf unfolded(11)</a></li>
      <li><a href="#page4">2 leaf unfolded(12)</a></li>
      <li><a href="#page4">3 leaf unfolded(13)</a></li>
      <li><a href="#page4">4 leaf unfolded(14))</a></li>
    </ul>
  </div>

  <div data-role="footer" data-position="fixed">
    <a href="#start" data-role="button" data-icon="arrow-u">Home</a>
   </div>
</div>
<!-- ------------------------------------------------------------- -->

<!-- ------------------------------------------------------------- -->
<div data-role="page" id="selectWeed"  data-add-back-btn="true">
  <div data-role="header">
    <h1>Select Weed</h1>
  </div>
  <div data-role="content">
    <li>
      <label for="name"> Crops:Berley </label>
    </li>
    <li>
      <label for="name"> Stage: 2 leaf unfolded </label>
    </li>
  </div>
 
  <div data-role="footer" data-position="fixed">
   <a href="#start" data-role="button" data-icon="arrow-u">Home</a>
   </div>
</div>

<!-- Start of second page: #two -->
<div data-role="page" id="selectStageWeed"  data-add-back-btn="true">
  <div data-role="header">
    <h1>Select Weed Stage</h1>
  </div>
  <!-- /header -->
  
  <div data-role="content">
    <h2>Two</h2>
    <p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
    <p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>
    <p><a href="#page1" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p>
  </div>
  <!-- /content -->
  
  <div data-role="footer" data-position="fixed">
  <a href="#start" data-role="button" data-icon="arrow-u">Home</a>
  </div>
  <!-- /footer --> 
</div>

<!-- /page two -->
<div data-role="page" id="userSelectionSummary"  data-add-back-btn="true">
  <div data-role="header">
    <h1>Selection Summary</h1>
  </div>
  <div data-role="content">
  
  <div id="weedCheckboxes">
  </div>
  
   <div id="actionButtons">
   <div class="ui-grid-b">
	<div class="ui-block-a"><a href="#selectWeed" data-role="button" data-icon="plus">Add Weeds</a></div>
	<div class="ui-block-b"><a href="#" data-role="button" data-icon="minus" onclick="deleteWeeds()">Delete Weeds</a></div>
	<div class="ui-block-c"><a href="#selectHerbicide" data-role="button" data-icon="arrow-r">Find Herbicides</a></div>
   </div><!-- /grid-b -->
  </div>
  </div>
 
  <div data-role="footer" data-position="fixed">
    <a href="#start" data-role="button" data-icon="arrow-u">Home</a>
   </div>
</div>

<!-- /page two -->
<div data-role="page" id="selectHerbicide"  data-add-back-btn="true">
  <div data-role="header">
    <h1>Select Herbicide</h1>
  </div>
  <div data-role="content">
    <li>
      <label for="name"> Crops:Berley </label>
    </li>
    <li>
      <label for="name"> Stage: 2 leaf unfolded </label>
    </li>
  </div>
 
  <div data-role="footer" data-position="fixed">
    <a href="#start" data-role="button" data-icon="arrow-u">Home</a>
   </div>
</div>


<!-- /page two -->
<div data-role="page" id="selectProduct"  data-add-back-btn="true">
  <div data-role="header">
    <h1>Select Product</h1>
  </div>
  <div data-role="content">
    <li>
      <label for="name"> Crops:Berley </label>
    </li>
    <li>
      <label for="name"> Stage: 2 leaf unfolded </label>
    </li>
  </div>
 
  <div data-role="footer" data-position="fixed">
   <a href="#start" data-role="button" data-icon="arrow-u">Home</a>
   </div>
</div>

<!-- /page two -->
<div data-role="page" id="selectAllProducts"  data-add-back-btn="true">
  <div data-role="header">
    <h1>Product List</h1>
  </div>
  <div data-role="content">
    <li>
      <label for="name"> Crops:Berley </label>
    </li>
    <li>
      <label for="name"> Stage: 2 leaf unfolded </label>
    </li>
  </div>
 
  <div data-role="footer" data-position="fixed">
    <a href="#start" data-role="button" data-icon="arrow-u">Home</a>
   </div>
</div>

<!-- /page two -->
<div data-role="page" id="selectAllHerbicides"  data-add-back-btn="true">
  <div data-role="header">
    <h1>Herbicide List</h1>
  </div>
  <div data-role="content">
    <li>
      <label for="name"> Crops:Berley </label>
    </li>
    <li>
      <label for="name"> Stage: 2 leaf unfolded </label>
    </li>
  </div>
 
  <div data-role="footer" data-position="fixed">
 <a href="#start" data-role="button" data-icon="arrow-u">Home</a>
   </div>
</div>

<!-- /page two -->
<div data-role="page" id="productInfo"  data-add-back-btn="true">
  <div data-role="header">
    <h1>Product Information</h1>
  </div>
  <div data-role="content">
    <li>
      <label for="name"> Crops:Berley </label>
    </li>
    <li>
      <label for="name"> Stage: 2 leaf unfolded </label>
    </li>
  </div>
 
  <div data-role="footer" data-position="fixed">
    <a href="#start" data-role="button" data-icon="arrow-u">Home</a>
   </div>
</div>

<div data-role="page" id="productRecommandation"  data-add-back-btn="true">
  <div data-role="header">
    <h1>Product Information</h1>
  </div>
  <div data-role="content">
    <li>
      <label for="name"> Crops:Berley </label>
    </li>
    <li>
      <label for="name"> Stage: 2 leaf unfolded </label>
    </li>
  </div>
 
  <div data-role="footer" data-position="fixed">
    <a href="#start" data-role="button" data-icon="arrow-u">Home</a>
   </div>
</div>

</body>
</html>